<!---总览数据页面-->
<template>
  <div class="ele-body ele-body-card">
    <a-row>
      <a-col :span="12" class="block-space-right">
        <a-card title="设备信息" class="card-width">
          <a-descriptions bordered :column="1">
            <a-descriptions-item label="当前时间">{{data.deviceTime}}</a-descriptions-item>
            <a-descriptions-item label="牛舍名称">{{data.oxtallName}}</a-descriptions-item>
            <a-descriptions-item label="区域名称">{{data.areaName}}</a-descriptions-item>
            <a-descriptions-item label="牛能四气体ID">{{data.recordId}}</a-descriptions-item>
            <a-descriptions-item label="设备号">{{data.recordNo}}</a-descriptions-item>
          </a-descriptions>
        </a-card>
      </a-col>
      <a-col :span="12" class="block-space-right">
        <!-- 右边统计快 -->
        <a-card title="实时数据" class="card-width">
          <a-row :gutter="8">
            <a-col :span="6">
              <a-card>
                <a-statistic
                  title="温度℃"
                  :value="gas.temperature"
                  :precision="1"
                  suffix=""
                  class="demo-class"
                  :value-style="{ color: '#cf1322' }"
                />
              </a-card>
            </a-col>
            <a-col :span="6">
              <a-card>
                <a-statistic
                  title="湿度%RH"
                  :value="gas.humidity"
                  :precision="1"
                  suffix=""
                  class="demo-class"
                  :value-style="{ color: '#cf1322' }"
                />
              </a-card>
            </a-col>
            <a-col :span="12">
              <a-card>
                <a-statistic
                  title="THI"
                  :value="gas.thi"
                  :precision="1"
                  suffix=""
                  class="demo-class"
                  :value-style="{ color: '#cf1322' }"
                />
              </a-card>
            </a-col>
          </a-row>
          <a-row :gutter="8">
            <a-col :span="6">
              <a-card>
                <a-statistic
                  title="CH4(ppm)"
                  :value="gas.methane"
                  :precision="1"
                  suffix=""
                  class="demo-class"
                  :value-style="{ color: '#cf1322' }"
                />
              </a-card>
            </a-col>
            <a-col :span="6">
              <a-card>
                <a-statistic
                  title="CO(ppm)"
                  :value="gas.co"
                  :precision="1"
                  suffix=""
                  class="demo-class"
                  :value-style="{ color: '#cf1322' }"
                />
              </a-card>
            </a-col>
            <a-col :span="6">
              <a-card>
                <a-statistic
                  title="O2(ppm)"
                  :value="gas.otwo"
                  :precision="1"
                  suffix=""
                  class="demo-class"
                  :value-style="{ color: '#cf1322' }"
                />
              </a-card>
            </a-col>
            <a-col :span="6">
              <a-card>
                <a-statistic
                  title="H2S(ppm)"
                  :value="gas.htwos"
                  :precision="1"
                  suffix=""
                  class="demo-class"
                  :value-style="{ color: '#cf1322' }"
                />
              </a-card>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
    </a-row>

    <!-- 报表统计 -->
    <a-row :gutter="16">
      <a-col :lg="12" :md="14" :sm="24" :xs="24">
        <a-card
          :bordered="false"
          title="最近4小时温湿度情况"
          :body-style="{padding: '16px 6px 0 0'}">
          <template #extra>
            <a-space size="middle" class="analysis-tabs-extra">
              <a-radio-group v-model:value="chartWhere.dateType" @change="selectDataType">
                <a-radio-button :value="1">4小时</a-radio-button>
                <a-radio-button :value="2">8小时</a-radio-button>
                <a-radio-button :value="3">12小时</a-radio-button>
                <a-radio-button :value="4">1天内</a-radio-button>
                <a-radio-button :value="5">2天内</a-radio-button>
              </a-radio-group>
            </a-space>
          </template>
          <v-chart
            ref="temperatureHumidityChart"
            style="height: 362px;"
            :option="temperatureHumidityChartOption"/>
        </a-card>
      </a-col>
      <a-col :lg="12" :md="10" :sm="24" :xs="24">
        <a-card
          :bordered="false"
          title="最近4小时空气气体情况"
          :body-style="{padding: '16px 6px 0 0'}">
          <v-chart
            ref="ch4Chart"
            style="height: 362px;"
            :option="methaneChartOption"/>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import { provide } from 'vue';
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { LineChart, BarChart } from 'echarts/charts';
import {
  GridComponent,
  TooltipComponent,
  LegendComponent
} from 'echarts/components';
import VChart, { THEME_KEY } from 'vue-echarts';
import 'echarts-wordcloud';
import { ChartTheme } from 'ele-admin-pro';
import { DeviceLuoxunGasApi } from '@/api/property/DeviceLuoxunGasApi';
import { DeviceLuoxunGasDataApi } from '@/api/property/DeviceLuoxunGasDataApi';
import moment from 'moment'

use([
  CanvasRenderer,
  LineChart,
  BarChart,
  GridComponent,
  TooltipComponent,
  LegendComponent
]);

provide(THEME_KEY, ChartTheme);

export default {
  name: 'DeviceLuoxungasMonitor',
  components: {
    VChart,
  },
  props: {
    data: Object
  },
  data() {
    return {
      // 最近1小时温度情况
      temperatureHumidityData: [],
      gas : {},
      loadTimer:null, //定义一个刷新的timer
      loadDetailTimer : null,
      chartWhere : {
        "dateType" : 1,
        "searchBeginTime" : moment().subtract(4, 'h').format('YYYY-MM-DD HH:mm:ss'),
      }
    };
  },
  mounted() {
    this.getTemperatureHumidityData();
    this.getDetail();
    this.loadTimer = setInterval(this.getTemperatureHumidityData, 30000);
    this.loadDetailTimer = setInterval(this.getDetail, 30000);
  },
  beforeUnmount() {
    clearInterval(this.loadTimer);
    clearInterval(this.loadDetailTimer);
  },
  computed: {
    //甲烷
    methaneChartOption(){
      return {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['甲烷(CH4)', 'O2', '硫化氢(H2S)', 'CO'],
          right: 20
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: this.temperatureHumidityData.map(d => d.time)
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '甲烷(CH4)',
            type: 'line',
            smooth: true,
            symbol: 'none',
            areaStyle: {
              opacity: 0.5
            },
            data: this.temperatureHumidityData.map(d => d.methane)
          },
          {
            name: 'O2',
            type: 'line',
            smooth: true,
            symbol: 'none',
            areaStyle: {
              opacity: 0.5
            },
            data: this.temperatureHumidityData.map(d => d.otwo)
          },
          {
            name: '硫化氢(H2S)',
            type: 'line',
            smooth: true,
            symbol: 'none',
            areaStyle: {
              opacity: 0.5
            },
            data: this.temperatureHumidityData.map(d => d.htwos)
          },
          {
            name: 'CO',
            type: 'line',
            smooth: true,
            symbol: 'none',
            areaStyle: {
              opacity: 0.5
            },
            data: this.temperatureHumidityData.map(d => d.co)
          }
        ]
      }
    },
    // 最近1小时温度情况折线图配置
    temperatureHumidityChartOption() {
      /*if (!this.visitHourData.length) {
        return null;
      }*/
      return {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['温度', '湿度', 'THI'],
          right: 20
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: this.temperatureHumidityData.map(d => d.time)
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '温度',
            type: 'line',
            smooth: true,
            symbol: 'none',
            areaStyle: {
              opacity: 0.5
            },
            data: this.temperatureHumidityData.map(d => d.temperature)
          },
          {
            name: '湿度',
            type: 'line',
            smooth: true,
            symbol: 'none',
            areaStyle: {
              opacity: 0.5
            },
            data: this.temperatureHumidityData.map(d => d.humidity)
          },
          {
            name: 'THI',
            type: 'line',
            smooth: true,
            symbol: 'none',
            areaStyle: {
              opacity: 0.5
            },
            data: this.temperatureHumidityData.map(d => d.thi)
          }
        ]
      }
    }
  },
  methods: {
    getDetail() {
      let that = this;
      DeviceLuoxunGasApi.detailByRecord(this.data.recordId).then(result => {
        that.gas = result || {};
      });
    },
    selectDataType () {
      clearInterval(this.loadTimer);
      if (this.chartWhere.dateType == 1) {
        this.chartWhere.searchBeginTime = moment().subtract(4, 'h').format('YYYY-MM-DD HH:mm:ss');
      } else if (this.chartWhere.dateType == 2) {
        this.chartWhere.searchBeginTime = moment().subtract(5, 'h').format('YYYY-MM-DD HH:mm:ss');
      } else if (this.chartWhere.dateType == 3) {
        this.chartWhere.searchBeginTime = moment().subtract(12, 'h').format('YYYY-MM-DD HH:mm:ss');
      } else if (this.chartWhere.dateType == 4) {
        this.chartWhere.searchBeginTime = moment().subtract(24, 'h').format('YYYY-MM-DD HH:mm:ss');
      } else if (this.chartWhere.dateType == 5) {
        this.chartWhere.searchBeginTime = moment().subtract(48, 'h').format('YYYY-MM-DD HH:mm:ss');
      }
      this.getTemperatureHumidityData();
      this.loadTimer = setInterval(this.getTemperatureHumidityData, 30000);
    },
    getTemperatureHumidityData(){
      let params = {
        searchBeginTime : this.chartWhere.searchBeginTime,
        searchEndTime : moment().format('YYYY-MM-DD HH:mm:ss'),
        recordId : this.data.recordId,
        orderBy : "asc",
        sortBy : "create_time"
      };
      DeviceLuoxunGasDataApi.list(params).then(list => {
        let _temperatureHumidityData = [];
        if (list && list.length > 0) {
          console.log(list);
          list.forEach(function(item) {
            let formatItem = {
              time : item.createTime.substr(0, 16),
              temperature : item.temperature,
              humidity : item.humidity,
              methane : item.methane,
              thi : item.thi,
              co : item.co,
              otwo : item.otwo,
              htwos : item.htwos
            };
            _temperatureHumidityData.push(formatItem);
          });
        } else {
          _temperatureHumidityData.push({
            time : moment().subtract(20, 'minute').format('YYYY-MM-DD HH:mm'),
            temperature : 0,
            humidity : 0,
            methane : 0,
            thi : 0,
            co : 0,
            otwo : 0,
            htwos : 0
          });
          _temperatureHumidityData.push({
            time : moment().subtract(10, 'minute').format('YYYY-MM-DD HH:mm'),
            temperature : 0,
            humidity : 0,
            methane : 0,
            thi : 0,
            co : 0,
            otwo : 0,
            htwos : 0
          });
          _temperatureHumidityData.push({
            time : moment().subtract(5, 'minute').format('YYYY-MM-DD HH:mm'),
            temperature : 0,
            humidity : 0,
            methane : 0,
            thi : 0,
            co : 0,
            otwo : 0,
            htwos : 0
          });
        }
        this.temperatureHumidityData = _temperatureHumidityData;
      });
    }
  },
  activated() {
    ['temperatureHumidityChart', 'ch4Chart'].forEach((name) => {
      this.$refs[name].resize();
    });
  }
};
</script>
<style scoped>
.block-space-top {
  /*上右下左*/
  padding: 10px 0 0 0;
}

.block-space-right {
  padding: 0 5px 0 0;
}

.block-space-left {
  padding: 0 0 0 5px;
}

.card-width {
  width: 100%;
}
@media screen and (max-width: 880px) {
  .analysis-tabs-extra {
    display: none;
  }
}
</style>
